var LunBo=function (cunfig) {
	this.ele=document.getElementById(config.id);
	this.images=config.images;
	this.speed=config.speed;
}
LunBo.prototype={
	init:function () {
		var img = document.createElement("img");
		img.src=this.images[0];
		this.ele.appendChild(img);
		var left=document.createElement("span");
		left.innerHTML="&gt";
		left.style.fontSize="72px";
		var right=document.createElement("span");
		right.innerHTML="&lt";
		right.style.fontSize="72px";
		this.ele.appendChild(left);
		this.ele.appendChild(right);
	}
}
/*var btns = document.createElement("num-btns");
		btns.innerHTML = "①";
		btns.style.fontSize = "30px";
		this.ele.appendChild(btns);
		var btns = document.createElement("num-btns");
		btns.innerHTML = "②";
		btns.style.fontSize = "30px";
		this.ele.appendChild(btns);
		var btns = document.createElement("num-btns");
		btns.innerHTML = "③";
		btns.style.fontSize = "30px";
		this.ele.appendChild(btns);
		var btns = document.createElement("num-btns");
		btns.innerHTML = "④";
		btns.style.fontSize = "30px";
		this.ele.appendChild(btns);
		var btns = document.createElement("num-btns");
		btns.innerHTML = "⑤";
		btns.style.fontSize = "30px";
		this.ele.appendChild(btns);
		var btns = document.createElement("num-btns");
		btns.innerHTML = "⑥";
		btns.style.fontSize = "30px";
		this.ele.appendChild(btns);*/
		
var LunBo = function(config) {
	this.ele = document.getElementById(config.id);
	this.images = config.images;
	this.speed = config.speed;
}
LunBo.prototype = {
	init: function() {
		var div = document.createElement("div");
		    div.style.posLeft = "relative";//相对定位
		    this.ele.appendChild(div);
		var img = document.createElement("img");
		    img.src = this.images[0];
		var left = document.createElement("span");
		    left.innerHTML = "&lt";
		    left.style.fontSize = "72px";
		    left.style.position = "absolute" //绝对定位
		    left.style.left = "0px";//距左边框
		var right= document.createElement("span");
		    right.innerHTML = "&gt";
		    right.style.fontSize = "72px";
		    right.style.position = "absolute" //绝对定位
		    right.style.right = "0px";//距右边距
		    div.appendChild(left);
		    div.appendChild(right);
		    div.appendChild(img);
		    img.style.width = this.ele.style.width;
		    img.style.height= this.ele.style.height;
		    right.style.top = left.style.top = (img.height - 108) / 2 + "px"
		    right.style.color = left.style.color = "#fff";
		    right.style.cursor = left.style.cursor = "pointer";
		var btns=document.createElement(("div"));
		    for(var i=0;i<this.images.length;i++){
		    	var span=document.createElement("span");
		    	span.innerHTML=i+1;
		    	btns.appendChild(span);
		    }
		    div.appendChild(btns);
	}
}

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	    <style type="text/css">
	    	#xx{
	    		margin: 200px auto;
	    	}
	    	#yy{
	    		margin: 100px auto;
	    	}
	    </style>
	</head>

	<body>
		<div id="xx" style="width: 600px;height: 300px" onselect="return false"></div>
		<div id="yy" style="width: 300px;height: 200px" onselect="return false"></div>
		<script src="lunbo.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var lb = new LunBo({
				id: "xx",
				images:["img/1.jpg", "img/2.jpg", "img/3.jpg","img/4.jpg"],
				speed: 1000
			});
			lb.init();
			var lb2 = new LunBo({
				id: "yy",
				images:["img/5.jpg", "img/6.jpg", "img/7.jpg"],
				speed: 500
			});
			lb2.init();
		</script>
	</body>

